<template>
    <div>
        <div  :class="screenWidth>1000?'no-data-box':'h5-no-data-box'" >
            <div   class="img-box"></div>
            <p>- 暂无内容！ -</p>
        </div>
    </div>
</template>
<script>
export default ({
    name: 'NoData',
    data() {
        return {
            message: 'Hello, Vue.js!'
        }
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        }
    },
})
</script>
<style scoped>
.no-data-box{
    min-height: 15.625vw;
    padding-top: 5.20833vw;
    width: 100%;
}
.no-data-box .img-box{
    width: 13.02083vw;
    height: 11.45833vw;
    background:url(@/assets/img/nodata.png) no-repeat center center / contain;
    margin: 0 auto;
}
.no-data-box p{
    font-size: 0.72917vw;
    color: #999;
    text-align: center;
    margin-top: 2.08333vw;
}
@media(max-width:1000px){
    .h5-no-data-box {
    min-height: 3rem;
    padding-top: 1rem;
    width: 100%;
}
.h5-no-data-box .img-box{
    width: 2.5rem;
    height: 2.2rem;
    background: url(@/assets/img/nodata.png) no-repeat center center / contain;
    margin: 0 auto;
}
.h5-no-data-box p{
    font-size: 0.28rem;
    color: #999;
    text-align: center;
    margin-top: 0.4rem;
}
}
</style>